<template>
	<view class="chat_shell">
		<view style="height: 16rpx;">

		</view>
		<view class="my_message">
			<u-swiper :list="list1"></u-swiper>
			<view class="my_box">
				<u--image :showLoading="true" shape="circle" :src="'https://cdn.uviewui.com/uview/album/1.jpg'"
					class="people_head" width="120rpx" height="120rpx"></u--image>
				<view style="width: 10rpx;"></view>
				<p class="people_name">TAKIEVIN</p>
			</view>
		</view>

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">



			<view class="chat_body">


				<u-swipe-action v-for="(item,index) in goods" :key="index" class="chat_item">
					<u-swipe-action-item :options="options1" :threshold="60">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content chat_info">
								<view class="head_chat">
									<u-avatar text="北" fontSize="18" randomBgColor class="user_portrait"></u-avatar>

								</view>
								<view class="message_chat">
									<text class="swipe-action__content__text message_text">北川</text>
									<text
										class="swipe-action__content__text message_text">基础使用基础使用基础使用基础使用基础使用基础使用基础使用</text>
								</view>
								<view class="message_chat">
									<text class="swipe-action__content__text icon_text">11/02</text>
									<div style="height: 1rpx;"></div>
									<view class="badge_box">
										<u-badge :type="'warning'" max="99" :value="1"></u-badge>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</mescroll-body>
		<view class="scroll_box">
			<u-alert :title="'aaa'" type="warning" :description="description"></u-alert>
		</view>
	</view>


</template>
<!-- ■上拉加载下拉刷新组件(页面【插件】) -->
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import {apiGoods} from "@/api/mock.js"

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {

				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				options1: [{
					text: '删除'
				}],
				goods: [1, 2, 3, 4, 5, 6, 7, 8, 9, '01', "02", "03", "04", "05", "06", "07", "08", 1, 2, 3, 4, 5, 6, 7, 8,
					9, '01', "02", "03", "04", "05", "06", "07", "08", 1, 2, 3, 4, 5, 6, 7, 8, 9, '01', "02", "03",
					"04", "05", "06", "07", "08", 1, 2, 3, 4, 5, 6, 7, 8, 9, '01', "02", "03", "04", "05", "06", "07",
					"08"
				] // 数据列表
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }

				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }
				this.mescroll.endErr();
				//联网加载数据
				// apiGoods(page.num, page.size).then(res=>{
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

				// 	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				// 	//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

				// 	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				// 	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

				// 	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				// 	//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

				// 	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
				// 	this.mescroll.endSuccess(res.list.length);

				// 	//设置列表数据
				// 	if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
				// 	this.goods=this.goods.concat(res.list); //追加新数据
				// }).catch(()=>{
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		border: none !important;

		// position: relative;
		&__content {
			// padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.swipe-action::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 85%;
		/* 宽度 */
		height: 1px;
		/* 边框厚度 */
		background-color: #eee;
		/* 边框颜色 */
	}

	.swipe-action__content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
</style>
<style scoped>
	.shell {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		height: 100vh;
	}

	.mescroll {
		position: fixed;
		top: 44px;
		bottom: 0;
		height: auto;
		/*如设置bottom:50px,则需height:auto才能生效*/
	}

	/*说明*/
	.notice {
		font-size: 26upx;
		padding: 40upx 0;
		border-bottom: 1upx solid #eee;
		text-align: center;
		color: #555;
	}

	.chat_shell {
		width: 100vw;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.chat_body {
		width: 91vw;
		border-radius: 20%;
		background-color: aliceblue;
	}

	.chat_item {
		border-radius: 16rpx;
	}

	.chat_info {
		width: 91vw;
		height: 24vw;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.user_portrait {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.head_chat {
		padding-left: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.message_chat {
		/* width: 85%; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;

	}

	.badge_box {
		width: 15vw;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		font-size: 36rpx;
		padding-right: 32rpx;
	}

	.message_text {
		width: 60vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.icon_text {
		/* width: 15vw; */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: end;
		font-size: 24rpx;
	}

	.user_portrait {
		/* border: 2px solid green; */


	}

	@keyframes animated-border {
		0% {
			box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.4);
		}

		100% {
			box-shadow: 0 0 0 20px rgba(0, 128, 0, 0);
		}
	}

	.my_message {
		width: 93vw;
		position: relative;
	}

	.my_box {
		width: 93vw;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 16rpx;
	}

	.people_name {
		font-size: 64rpx;
		color: white;
		font-weight: 800;
	}

	.people_head {
		width: 120rpx !important;
		height: 120rpx !important;
		border-radius: 50%;
		animation: animated-border 9.5s infinite;
	}

	.scroll_box {
		width: 80vw;
		height: auto;
	}
</style>